<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
     <p id="log"></p>
    <script src='../js/spaceship.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
            var ship = new SpaceShip();
                ship.x = canvas.width/2;
                ship.y = canvas.height/2;
            
            var f = 0.97,vr = 0, vx = 0, vy = 0, ax = 0, ay = 0, speed = 0, angle = 0;
            
            window.addEventListener("keydown", function(event){
                switch (event.keyCode){
                    case 37:
                        vr = -3;
                        break;
                    case 39:
                        vr = 3;
                        break;
                    case 38:
                        speed = 0.5;
                        ship.showFlame = true;
                        break;
                }
            }, false);
            window.addEventListener("keyup", function(event){
                vr = 0;
                speed = 0;
                ship.showFlame = false;
            }, false);
            
            (function drawFramw(){
                window.requestAnimationFrame(drawFramw, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                ship.rotation += vr * Math.PI/180;
                angle = ship.rotation;
                
                ax = Math.cos(angle)*speed;
                ay = Math.sin(angle)*speed;
                
                vx += ax;
                vy += ay;
                
                //摩擦力
                vx *= f;
                vy *= f;
                
                ship.x += vx;
                ship.y += vy;
                
               //边界检测
               if(ship.x + ship.width/2 > canvas.width){
                   ship.x = canvas.width - ship.width;
                   vx *= -1;
               }else if(ship.x < ship.width/2){
                   ship.x = ship.width/2;
                   vx *= -1;
               }
               if(ship.y + ship.height/2 > canvas.height){
                   ship.y = canvas.height - ship.height/2;
                   vy *= -1;
               }else if(ship.y < ship.height/2){
                   ship.y = ship.height/2;
                   vy *= -1;
               }
                ship.draw(context);
            }());

        }

      /*   // 1.移除一个超过边界的物体
        if(object.x - object.width/2 > right || 
           object.x + object.width/2 < left ||
           object.y - object.height/2 > bottom ||
           object.y + object.height/2 < top){
            //移除物体代码
           }

        // 2.重现一个超出边界的物体
        if(object.x - object.width/2 > right || 
           object.x + object.width/2 < left ||
           object.y - object.height/2 > bottom ||
           object.y + object.height/2 < top){
            //重新设置对象的位置和速度
           }

        //3. 边界环绕
        if(object.x - object.width/2 > right){
            object.x = left - object.width/2;
        }else if(object.x + object.width/2 < left){
            object.x = object.width/2 + right；
        }
        if(object.y - object.height/2 > bottom){
            object.y = top - object.height/2;
        }else if(object.y + object.height/2 < top){
            object.y = object.height/2 + bottom；
        }
      
        //4.摩擦力(正规军)
        speed = Math.sqrt(vx*vx + vy*vy);
        angle = Math.atan2(vy, vx);
        if(speed > f){
             speed -= f;
        }else{
            speed = 0;
        }
        vx = Math.cos(angle)*speed;
        vy = Math.sin(angle)*speed;
       
        //4.摩擦力(野战军)
          vx *= f;
          vy *= f;*/
    </script>
</body>
</html>
